<template>
    <div class="app-container">
        进行充值
        <div class="form">
            <el-form ref="formName" :model="form" label-width="110px" label-position="left" :rules="rules">
                <el-form-item label="代理商家名称" v-if="this.$route.query.info == 'Agent'" prop="name">
                    <el-select clearable v-model="form.name" placeholder="请选择代理商家">
                        <el-option v-for="item in AgentList" :key="item.id" :value="item.name">{{
                            item.name
                            }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商家名称" v-if="this.$route.query.info == 'Store'" prop="storeName">
                    <el-select clearable v-model="form.storeName" placeholder="请选择商家">
                        <el-option v-for="item in StoreList" :key="item.id" :value="item.name">{{
                            item.name
                            }}</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="充值金额" prop="exchangeAmount">
                    <div style="display: flex;"> <el-button @click="hanlevalue(1000)">1000</el-button>
                        <el-button @click="hanlevalue(2000)">2000</el-button>
                        <el-button @click="hanlevalue(3000)">3000</el-button>
                        <el-input v-model="form.exchangeAmount" placeholder="请输入其他金额" clearable
                            style="margin-left: 10px;"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="上传凭证" prop="imgUrl">
                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
                        :file-list="fileList" :limit="1" :on-change="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar">
                        <div v-else>
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                        </div>
                    </el-upload></el-form-item>

                <span>(只能上传jpg/png文件，且不超过500kb)</span>
                <el-form-item style="margin-top: 50px;">
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button @click="Back">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { uploadFile } from "@/api/messages/eventManage";
import { getlistAllAgent, getlistMyStroe, Submitagent,Submitstore } from "@/api/agentAdd/agentAdd";
export default {
    name: "",
    data() {
        return {
            form: {},
            imageUrl: '',
            fileList: [],
            AgentList: [],
            StoreList: [],
            rules: {
                name: [
                    { required: true, message: '请选择代理商家', trigger: 'blur' }
                ],
                storeName: [
                    { required: true, message: '请选择商家', trigger: 'blur' }
                ],
                exchangeAmount: [
                    { required: true, message: '请填写充值金额', trigger: 'blur' }
                ],

                imgUrl: [
                    { required: true, message: '请上传凭证', trigger: 'blur' }
                ],
            },
        };
    },
    created() {
        this.getlistAllAgent();
    },
    methods: {
        getlistAllAgent() {
            if (this.$route.query.info == 'Agent') {
                getlistAllAgent().then(res => {
                    this.AgentList = res.data
                });
            } else if (this.$route.query.info == 'Store') {
                getlistMyStroe().then(res => {
                    this.StoreList = res.data
                });
            }
        },
        onSubmit(formName) {
            this.$refs.formName.validate((valid) => {
                if (valid) {
                    if (this.$route.query.info == 'Agent') {
                        this.AgentList.forEach((item) => {
                            if (item.name == this.form.name) {
                                this.form.agentId = item.id
                            }
                        })
                        Submitagent(this.form).then(response => {
                            this.$message({
                                message: response.data,
                                type: 'success'
                            }); 
                            this.$router.push({ path: '/order/agentAdd' })
                        });
                    } else if (this.$route.query.info == 'Store') {
                        this.StoreList.forEach((item) => {
                            if (item.name == this.form.storeName) {
                                this.form.storeId = item.id
                            }
                        })
                        Submitstore(this.form).then(response => {
                            this.$message({
                                message: response.msg,
                                type: 'success'
                            });
                            this.$router.push({ path: '/order/storeAdd' }) 
                        });
                    }




                } else {

                }
            });
        },
        Back() {
            this.$router.go(-1)
        },
        hanlevalue(row) {
            this.$set(this.form, 'exchangeAmount', row)
            this.form.exchangeAmount = row
        },
        handleAvatarSuccess(res, file) {
            let formData = new FormData();
            formData.append('file', file[0].raw);
            uploadFile(formData).then(res => {
                this.form.imgUrl = res.data;
                this.fileList = [];
            })
        },
        beforeAvatarUpload(file) {

        }

    }
};
</script>

<style lang="scss" scoped>
.form {
    width: 100%;
    text-align: center;

    ::v-deep .el-form-item__content {
        text-align: left;
    }

    .el-form {
        width: 550px;
        margin: 10px auto;
    }

    .el-input {
        width: 280px;
    }

    ::v-deep .el-upload {
        border: 1px dashed #d9d9d9 !important;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    span {
        font-size: 14px;
    }
}
</style>
